/* 学习目标：useEffect生命周期  */

import { useEffect, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  // 1. 挂载阶段：挂载后只执行一次
  // 语法： useEffect(() => {},  [])
  // 场景： 💥💥 发请求  、 最先获取dom
  useEffect(() => {
    console.log('我会在数据变化时,自动执行  ----->  ', count);
    document.title = count;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 2. 挂载、更新两个阶段二合一
  // 语法： useEffect(() => {},  [依赖项])：
  // 类似：vue中watch，开起了immediate
  useEffect(() => {
    console.log('我会在数据变化时,自动执行  ----->  ', count);
    document.title = count;
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      App
      <button onClick={() => setCount(count + 1)}>++</button>
    </div>
  );
}
